import React from 'react';
import type { FormProps } from 'antd';
import { Button, Form, Input } from 'antd';
import { useNavigate } from 'react-router-dom';
import { LoginApi } from '@/api/user';
import style from './login.module.scss'
function Login() {
  const nav =useNavigate()
  type FieldType = {
  account: string;
  password: string;
  
};

const onFinish: FormProps<FieldType>['onFinish'] = async(values) => {
  const {account,password}=values
  const res=await LoginApi({
    account,password
  })
  localStorage.setItem('token',res.token)
  nav('/home')
};

const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
  
  return (

    <div className={style.container}>
      <div className={style.content}>
        <h2>文章发布系统</h2>
        <h2>大概是吧</h2>
        <h1>hgjhgdfsddgfhgfsg</h1>
      <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item<FieldType>
      label="账号"
      name="account"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item<FieldType>
      label="密码"
      name="password"
      rules={[{ required: true, message: 'Please input your password!' }]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
       登录
      </Button>
    </Form.Item>
  </Form>
      </div>
      
    </div>
  )
}

export default Login